<template>
	<view class="my">
		<!-- <view class="my-bg"></view> -->
		<!-- <an-nav-bar title="我的" :isback="false"> </an-nav-bar> -->
		<view class="nav" style="background: #fff linear-gradient(90deg, #d7b075, #aa8050);">
			<view class="title" style="color: #fff;">我的</view>
			<view class="setting" @click="gotoUrl('/pages/my/setting/setting')">
				<uni-icons type="gear" size="24" color="#333"></uni-icons>
			</view>
		</view>
		<view class="content">
			<view class="member flex" v-if="isLogin" style="margin-top: 5px;" >
				<view class="avatar" @click="gotoUrl('/pages/my/memberInfo')">
					<image v-if="userInfo.photo" :src="$common.binImage(userInfo.photo)" mode=""></image>
					<image v-else src="/static/image/avatar.png" mode=""></image>
				</view>
				<view class="info">
					<view class="" @click="gotoUrl('/pages/my/memberInfo')">
						<text v-if="userInfo.mobile">{{userInfo.mobile | geTel}}</text>
					</view>
					<view class="label flex" @click="$common.doCopy(userInfo.customerCode)" style="font-size: 24rpx;">邀请码：{{userInfo.customerCode}} <text style="margin-left: 10px; color: #999; font-size: 24rpx;">复制</text></view>
				</view>
				<!-- <view class="edit"></view> -->
			</view>
			<view class="member flex" @click="gotoUrl('/pages/login/login')" v-if="!isLogin">
				<view class="avatar">
					<image src="/static/member-avatar.png" mode=""></image>
				</view>
				<view class="info">
					<view class="">
						<text>游客</text>
					</view>
					<view class="">点此登录康约到家账户</view>
				</view>
				<view class="edit"></view>
			</view>
			
			<view class="order">
				<view class="title flex">
					<view class="uni-label-pointer" style="color: #333;">我的订单</view>
					<view class="more flex iconfont" @click="gotoUrl('/pages/my/order?status=0')">查看全部</view>
				</view>
				<view class="list flex_sw">
					<view class="state" @click="gotoUrl('/pages/my/order?status=1')">
						<view class="icon">
							<image src="/static/order-1.png" mode=""></image>
						</view>
						<view class="text">待支付</view>
					</view>
					<view class="state" @click="gotoUrl('/pages/my/order?status=2')">
						<view class="icon">
							<image src="/static/order-2.png" mode=""></image>
						</view>
						<view class="text">待接单</view>
					</view>
					<view class="state" @click="gotoUrl('/pages/my/order?status=3')">
						<view class="icon">
							<image src="/static/order-3.png" mode=""></image>
						</view>
						<view class="text">待服务</view>
					</view>
					<view class="state" @click="gotoUrl('/pages/my/order?status=4')">
						<view class="icon">
							<image src="/static/order-4.png" mode=""></image>
						</view>
						<view class="text">待评价</view>
					</view>
				</view>
			</view>
			
			<view class="serve">
				<view class="title">推广服务</view>
				<view class="list flex">
					<view class="item" @click="gotoUrl('/pages/s/apply/index?accountType=1')">
						<view class="icon">
							<image src="/static/serve-2.png" mode=""></image>
						</view>
						<view class="text">技师入驻</view>
					</view>
					<view class="item" @click="gotoUrl('/pages/s/apply/storerIntro')">
						<view class="icon">
							<image src="/static/serve-1.png" mode=""></image>
						</view>
						<view class="text">商家入驻</view>
					</view>
					<view class="item" @click="gotoUrl('/pages/s/share/index')">
						<view class="icon">
							<image src="/static/serve-3.png" mode=""></image>
						</view>
						<view class="text">分销赚钱</view>
					</view>
					<view class="item" @click="gotoUrl('/pages/my/technicianSquare')">
						<view class="icon">
							<image src="/static/serve-4.png" mode=""></image>
						</view>
						<view class="text">技师广场</view>
					</view>
				</view>
			</view>
			<view class="serve">
				<view class="title">其他工具</view>
				<view class="list flex">
					<view class="item" @click="gotoUrl('/pages/my/address')">
						<view class="icon">
							<image src="/static/serve-6.png" mode=""></image>
						</view>
						<view class="text">我的地址</view>
					</view>
					<view class="item" @click="call" >
						<view class="icon">
							<image src="/static/serve-8.png" mode=""></image>
						</view>
						<view class="text">客服中心</view>
					</view>
					<view v-if="isLogin && !userInfo.promoterId" class="item" @click="$refs.refBindCode.open()">
						<view class="icon">
							<image src="/static/serve-7.png" mode=""></image>
						</view>
						<view class="text">绑邀请码</view>
					</view>
					<view class="item" @click="$refs.refUpgrade.check()" >
						<view class="icon">
							<image src="/static/serve-10.png" mode=""></image>
						</view>
						<view class="text">我要更新</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 绑定邀请码 -->
		<uni-popup type="bottom" ref="refBindCode">
			<view class="popup-bottom" style="padding-bottom: 120rpx;">
				<view class="popup-bottom_title">绑定邀请码</view>
				<view style="padding: 20rpx 40rpx;">
					<input type="text" v-model="bindCode" placeholder="请输入" style=" height: 80rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; border: 1rpx solid #eee; border-radius: 10rpx;" />
					<view style=" margin-top: 20rpx;">
						<button class="theme-btn" @click="doBindCode">提交</button>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<Upgrade ref="refUpgrade" />
	</view>
</template>

<script>

	import indexConfig from '@/config/index.config';
	import Upgrade from "@/components/upgrade"
	
	export default {
		components: {
			Upgrade,
		},
		data() {
			return {
				imgUrl: indexConfig.imgUrl,
				bindCode:'',
				
			};
		},
		computed: {
			isLogin() {
				return this.$mStore.state.accessToken
			},
			userInfo() {
				return this.$mStore.state.userInfo
			}
		},
		onLoad() {

		},
		onShow() {
			uni.setTabBarStyle({
				//"backgroundColor": "#0F0E0C",
				"backgroundColor": "#ffffff",
				"color": "#B8B8B8",
				"selectedColor": "#aa8050",
			})
			this.$mStore.commit('getUserInfo');
			
		},
		methods: {
			call() {
				uni.makePhoneCall({
					phoneNumber: '‭075544472268‬',
					success: ()=> {},
				})
			},
			gotoUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			doBindCode(){
				if (!this.bindCode){
					this.$common.toast('请输入邀请码')
					return
				}

				// 查询店铺详情
				this.$http.put('/app/customer/customer/bindPromoterCode/' + this.bindCode).then(res => {
					this.$common.toast()
					this.$refs.refBindCode.close()
					this.$mStore.commit('getUserInfo')
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.my {
		/* ifdef H5 */
		padding-bottom: 80rpx;

		/*  endif */
		image {
			background: none !important;
		}

		.content {
			top: calc(var(--status-bar-height) + 88rpx);
			padding: 0 10px;
			position: relative;
			z-index: 1;
			padding-bottom: 32rpx;
		}

		.uni-label-pointer {
			flex: 1;
			color: #fff;
			font-size: 28rpx;
		}

		.box {
			width: 100%;
			//background: #dcf7fc;
			border-radius: 20rpx;
			box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);
			margin-bottom: 10rpx;



			.line {
				border-bottom: 2rpx solid #454545;
				padding: 0 20rpx;
				height: 100rpx;

				&:last-child {
					border: none;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.serve {
			width: 100%;
			//background: #dcf7fc;
			box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, .1);
			border-radius: 10px;
			box-sizing: border-box;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			color: #333;

			.title {
				font-size: 28rpx;
				padding: 20rpx 0 30rpx;
				
			}

			.list {
				flex-wrap: wrap;

				.item {
					text-align: center;
					margin-right: 94rpx;
					margin-bottom: 36rpx;
					width: 96rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					&:nth-child(4) {
						margin-right: 0rpx;
					}

					.icon {
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						font-size: 24rpx;
					}
				}
			}
		}

		.banner {
			width: 100%;
			height: 160rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.banner-swiper,
			swiper-item,
			image {
				width: 100%;
				height: 100%;
			}
		}

		.order {
			width: 100%;
			height: 244rpx;
			//background: #dcf7fc;
			box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, .1);
			border-radius: 10px;
			padding: 0 10px;
			box-sizing: border-box;
			margin-bottom: 10px;
			color: #333;

			.list {
				padding: 0 20rpx;

				.state {
					text-align: center;

					.icon {
						height: 68rpx;
						display: inline-block;
						position: relative;
						margin: 0 auto 10rpx;

						image {
							width: 68rpx;
							height: 68rpx;
						}
					}

					.text {
						display: block;
						font-size: 24rpx;
					}
				}
			}

			.title {
				padding: 20rpx 0 40rpx;
				justify-content: space-between;

				.more {
					font-size: 24rpx;

					&::after {
						content: '\e65f';
						font-weight: bold;
						font-size: 20rpx;
						margin-left: 10rpx;
						transform: translateY(-1rpx);
					}
				}
			}
		}

		.datas {
			height: 160rpx;
			color: #333;

			.item {
				width: 33.33%;
				text-align: center;

				.val {
					display: block;
					font-size: 40rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.label {
					font-size: 28rpx;
				}
			}
		}

		.vip {
			height: 122rpx;
			//background: url(/static/vip-bg2.png) no-repeat;
			//background: #dcf7fc;
			background-size: 100% auto;
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.text {
				color: #333;
				font-size: 24rpx;
				flex: 1;
			}

			button {
				margin-top: -16rpx;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: linear-gradient(289deg, #d7b075 0%, #ffd68e 100%);
				border-radius: 10px;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
				color: #fff;
				font-size: 24rpx;
				font-weight: 700;
				color: #333333;

				&::after {
					border: none;
				}
			}

			// &::before {
			// 	content: "";
			// 	display: block;
			// 	width: 28px;
			// 	height: 24px;
			// 	background: url(/static/vip.png) no-repeat;
			// 	background-size: 100% auto;
			// 	margin-right: 10px;
			// }
		}

		.member {
			margin-bottom: 20rpx;

			.avatar {
				width: 138rpx;
				height: 138rpx;
				border-radius: 50%;
				position: relative;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info>view {
				display: block;
				color: #333;
				font-size: 30rpx;
				max-width: 400r;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.edit {
				width: 60rpx;
				height: 60rpx;
				background: url(/static/icon_edit.png) no-repeat;
				background-size: 100% auto;
				margin-left: 30rpx;
			}
		}


		.my-bg {
			width: 100%;
			height: 418rpx;
			background: #ffffff;
			position: fixed;
			left: 0;
			top: 0;
		}

		.nav {
			width: 100%;
			height: calc(var(--status-bar-height) + 88rpx);
			position: fixed;
			left: 0;
			top: 0;
			background: #ffffff;
			z-index: 999;
			box-sizing: border-box;
			padding-top: var(--status-bar-height);

			.title {
				height: calc(var(--status-bar-height) + 88rpx);
				box-sizing: border-box;
				width: 100%;
				padding: 0 75px 0;
				color: #333;
				text-align: center;
				line-height: 88rpx;
				font-size: 34rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.setting {
				position: fixed;
				right: 0;
				top: var(--status-bar-height);
				z-index: 999;
				padding: 0 15px;
				height: 44px;
				width: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.user-function {
		margin: 5rpx 0;

	}
	.user-function ._wrap{
		margin-bottom: 15rpx;
		padding: 20rpx 0;
		//background: #dcf7fc;
		border-radius: 10px;
		color: #FFFFFF;
	}
	.user-function .cell1 ._wrap{
		margin-right: 10rpx;
	}
	.user-function .cell2 ._wrap{
		margin-left: 10rpx;
	}
	.user-function .icon{
		margin: 10rpx 20rpx 0 0;
		width: 68rpx;
		height: 68rpx;
	}
	.user-function .desc{
		margin: 0 0 0 40rpx;
	}
	.user-function .desc .span{
		line-height: 40rpx;
		font-size: 28rpx;
	}
	.user-function .desc .p{
		line-height: 40rpx;
		font-size: 24rpx;
		opacity: .5;
	}
</style>
